import { Button, Input, Modal } from 'antd'
import { FC, useEffect, useState } from 'react'

const { TextArea } = Input

interface TextInputModalProps {
  /** 是否显示弹窗 */
  open: boolean
  /** 关闭弹窗回调 */
  onCancel: () => void
  /** 确认回调，返回输入的文本 */
  onConfirm: (value: string) => void | Promise<void>
  /** 弹窗标题 */
  title: string
  /** 输入框提示文本 */
  placeholder?: string
  /** 输入框行数 */
  rows?: number
  /** 最大长度限制 */
  maxLength?: number
  /** 确认按钮文本 */
  confirmText?: string
  /** 取消按钮文本 */
  cancelText?: string
  /** 默认值 */
  defaultValue?: string
  /** 是否自动获取焦点 */
  autoFocus?: boolean
}

/**
 * 统一的文本输入弹窗组件
 * 用于各种需要输入文本的场景，如填写原因、添加回复等
 */
const TextInputModal: FC<TextInputModalProps> = ({
  open,
  onCancel,
  onConfirm,
  title,
  placeholder = '请输入内容',
  rows = 6,
  maxLength = 500,
  confirmText = '确认',
  cancelText = '取消',
  defaultValue = '',
  autoFocus = true
}) => {
  // useState
  const [inputValue, setInputValue] = useState('')
  const [loading, setLoading] = useState(false)

  // 当弹窗打开时，重置输入值
  useEffect(() => {
    if (open) {
      setInputValue(defaultValue)
    }
  }, [open, defaultValue])

  // 方法定义
  // 处理确认
  const handleConfirm = async () => {
    if (!inputValue.trim()) {
      return
    }

    setLoading(true)
    try {
      await onConfirm(inputValue.trim())
    } finally {
      setLoading(false)
    }
  }

  // 处理取消
  const handleCancel = () => {
    setInputValue('')
    onCancel()
  }

  return (
    <Modal
      title={title}
      open={open}
      onCancel={handleCancel}
      footer={[
        <Button
          key="cancel"
          onClick={handleCancel}
        >
          {cancelText}
        </Button>,
        <Button
          key="confirm"
          variant="outlined"
          color="primary"
          loading={loading}
          onClick={handleConfirm}
          disabled={!inputValue.trim()}
        >
          {confirmText}
        </Button>
      ]}
      width={600}
    >
      <div className="py-4">
        <TextArea
          value={inputValue}
          onChange={e => setInputValue(e.target.value)}
          placeholder={placeholder}
          rows={rows}
          maxLength={maxLength}
          autoFocus={autoFocus}
          showCount={maxLength > 0}
        />
      </div>
    </Modal>
  )
}

export default TextInputModal
